<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-06 22:42:24
 * @LastEditTime: 2022-04-06 23:41:56
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
-->
<script setup>
import { ref, onMounted } from 'vue'
import Player from 'xgplayer'
import { useIntersectionObserver } from '@vueuse/core'
const targetIsVisible = ref(true)

onMounted(() => {
  const player = new Player({
    id: 'mse',
    url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
    width: '100%',
    height: '100%'
  });
  useIntersectionObserver(
    document.querySelector('#bigBox'),
    ([{ isIntersecting }]) => {
      targetIsVisible.value = isIntersecting
    })
})
</script>

<template>
    <div class="small" id="smallPlayer"></div>
    <div class="bigBox" id="bigBox">
      <Teleport to="#smallPlayer" :disabled="targetIsVisible">
        <div class="big" id="mse"></div>
      </Teleport>
    </div>
</template>

<style>
body,#app{
  height: 2000px;
}
.bigBox {
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.small {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  height: 200px;
}
</style>
